<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #inp {
            margin-top: 200px;
        }

        #box {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin-left: 600px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <input type="text" id="inp">

    <div id="box"></div>
</body>

</html>
<script>
    let divOne = document.getElementById('box')
    let inp = document.getElementById('inp')
    // 事件对象 给元素的某一个行为绑定方法（不管是DOM0，DOM2）,当事件触发的时候，都会把对象的绑定方法执行
    // 不仅仅执行了，而且还给对应的方法传递了一个参数值
    function fn(event) {
        //PointerEvent 点击事件对象
        //MouseEvent 鼠标事件对象
        //KeyboardEvent 键盘事件对象
        console.log('fn--->', event);
        //event.type:'click',当前事件类型
        //event.clientX/clientY:鼠标触发点距离"当前窗口"
        // （不管处于哪一层，都是获取的距离当前屏幕左上角）左上角的x/y轴的坐标
        // enent.pageX/pageY:鼠标触发距离'BODY'左上角的xy轴的坐标（IE678不兼容）
        //event.screenX/screenY：鼠标触发点距离整个屏幕左上角的xy轴坐标
        //event.offsetX/offsetY：鼠标触发点距离当前触发元素左上角的xy轴坐标
        //event.target 获取当前操作的事件源（鼠标是在哪个元素上操作的，那么事件源就是谁
    }
    divOne.onclick = fn;
    divOne.onmouseenter = fn;
    inp.onkeydown = fn;

</script>